<template>
    <view class="address_box">
        <view class="box-top">
            <view class="address_detail">
                <view v-if="addressList.length===0">
                    <MnoData></MnoData>
                </view>
                <view v-else v-for="(item,index) of addressList" :key="index" class="address-item">
                    <view class="bank_info">
                        <view class="bank_logo_name_box" @tap="chooseBankCard(item)">
                            <view class="bank_logo_box"><image class="bank_logo" :src="imgUrl+'/static/img/'+item.bank_logo"/></view>
                            <view class="bank_name">{{item.name}}</view>
                        </view>
                        <view>
                            <van-radio-group :value="default_id" @change="onChange">
                                <van-radio :name="item.id" checked-color="#FA5B4D"><text class="check_text">默认</text></van-radio>
                            </van-radio-group>
                        </view>
                    </view>
                    <view class="address" @tap="chooseBankCard(item)">
                        {{item.bank_number}}
                    </view>
                </view>
                <view class="add-address" @tap="handleGoAdd">
                    <view class="add-button" v-if="is_show===true" >
                        <view class="add_con">+</view>
                        <view class="add_bank_text">添加银行卡</view>
                    </view>

                </view>
            </view>
            <view class="tips"><p>温馨提示：不可使用信用卡，否则提现无法到账</p></view>
        </view>
    </view>
</template>

<script>
    import MnoData from '@/components/m-noData.vue'
    export default {
        name: "bankCardList",
        data() {
            return {
                default_id:'',
                params: {},
                addressList: [],
                is_refresh:false,
                is_show:false,
                imgUrl:this.$mConfig.assetsPath,
            }
        },
        onLoad(){
          this.is_show=true
        },
        onShow:function(){
                this.getMyBankCardList();
        },
        mounted() {
            // this.getMyBankCardList();
        },
        methods: {
            async getMyBankCardList() {
                let otherAddress = await  this.$apis.getMyBankCardList({access_token:''})
                console.log(otherAddress.data)
                if(otherAddress.data.lists.length>0){
                    this.addressList=otherAddress.data.lists
                    this.addressList.forEach((item)=>{
                        if(parseInt(item.is_default)===1){
                            this.default_id=item.id
                            return
                        }

                    })
                }
            },
            async onChange(event) {
                if(event.detail!==this.default_id){
                    //先处理默认地址请求
                    uni.showLoading({});
                    let resData=await this.$apis.setDefaultBank({access_token: '',id:parseInt(event.detail)})
                    if(resData.code===0){
                        this.default_id=event.detail;
                    }
                    uni.hideLoading();

                }

            },
            handleGoAdd() {
                uni.navigateTo({
                    url: "/pages/user/addBankCard"
                })
            },

            // async delAddress(event) {
            //     uni.showLoading({});
            //     let resData=await this.$apis.delAddress({id:event.currentTarget.dataset.id})
            //     uni.hideLoading();
            //     if(resData.code===0){
            //         uni.showToast({
            //             title:"删除成功",
            //             icon:"success",
            //         })
            //         setTimeout(()=>{
            //             uni.redirectTo({
            //                 url: "/pages/user/addressList"
            //             })
            //         },1000)
            //     }
            // },
            chooseBankCard(item){
                this.$store.commit('CHANGEBANKCARDID',item.id)
                uni.navigateBack({
                    delta: 1 // 代表返回上 1 页
                })
            }
        },
        components: {
            MnoData
        }
    }
</script>

<style>
    page{
        background-color:#FAFAFA
    }
</style>
<style lang="less" scoped>
    .tips{
        position: fixed;
        width: 100%;
        bottom: 30rpx;
        font-size: 25rpx;
        color:  #FF9400;
        margin-left: 12%;
    }
    .address_box{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .box-top{
        width: 90%;
    }
    .address_detail{
        display: flex;
        flex-direction: column;
    }
    .button-top{
        display: flex;
        flex-direction: row;
        position: relative;
        right: -90rpx;
    }
    .address_button{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin-top: 15rpx;
        border-top: solid #cccccc 1px ;
        padding-top: 10rpx;
    }
    .address-item{
        padding:35rpx;
        padding-bottom: 30rpx;
        padding-top: 30rpx;
        font-size: 28rpx;
        margin-top: 25rpx;
        border: solid #cccccc 1px;
        border-radius:10px;
        background-image: url("https://qiniu.scxhrd.com/static/img/bank_bak.png");
        background-size: 100% 100%;

    }
    .add-address{
        width: 680rpx;
        height: 130rpx;
        background-color: #ffffff;
        display: flex;
        justify-content: flex-start;
        margin-top: 20rpx;
        .add-button{
           display: flex;
            flex-direction: row;
        }
    }
    .address-name-mobile{
        display: flex;
        justify-content: space-between;
    }
    .address{
        margin-top: 20rpx;
        text-align: center;
        font-size: 37rpx;
        color: #FFFFFF;
    }
    .address-default{
        margin-top: 10rpx;
    }
    .button-delete{
        margin-left: 130rpx;
    }
    .add_bank_text{
        color: #333333;
        font-size: 35rpx;
        padding-top: 35rpx;
        margin-left: 30rpx;
        font-weight: Medium;
        font-family: PingFang-SC-Medium;
    }
    .add_con{
        margin-left: 20rpx;
        font-size: 80rpx;
    }
    .bank_info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .bank_logo_name_box{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .bank_logo{
        width: 70rpx;
        height: 70rpx;
    }
    .bank_name{
        color: #FFFFFF;
        font-size: 34rpx;
        margin-left: 30rpx;
    }
    .check_text{
        color: #ffffff;
    }
</style>
